<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { markRaw, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import axios from 'axios'
//主题
import data from '../../../static/theme/chalk.json'
import data1 from '../../../static/theme/vintage.json'
import { useStore } from 'vuex'
const store = useStore()
const seller_ref = ref(null) //ref
const chartInstance = ref(null) //实例化
const allData = ref(null) //总数据
let currentIndex = 0
let timerId = null
let titleFontSize = ref(0)
// 初始化echartInstance对象
const initChart = () => {
  //初始化主题
  echarts.registerTheme('chalk', data)
  echarts.registerTheme('vintage', data1)
  //解决报错 用 markRaw淘一下转成不是响应式的
  chartInstance.value = markRaw(
    echarts.init(seller_ref.value, store.state.visual.theme)
  )

  const initOption = {
    title: {
      text: '▎ 库存销售量',
      left: 20,
      top: 20
    }
  }
  chartInstance.value.setOption(initOption)
  chartInstance.value.on('mouseover', () => {
    clearInterval(timerId)
  })
  chartInstance.value.on('mouseout', () => {
    startInterval()
  })
}

//获取数据
const getData = () => {
  axios.get('../../../static/data/stock.json').then((res) => {
    allData.value = res.data
    updateChart()
  })
}
//更新图表
const updateChart = () => {
  // 处理图表需要的数据
  //5个圆环对应的圆心点
  const centerPointers = [
    ['18%', '40%'],
    ['50%', '40%'],
    ['82%', '40%'],
    ['34%', '75%'],
    ['66%', '75%']
  ]
  // 增加5个圆环的渐变颜色范围
  const colorArrs = [
    ['#4FF778', '#0BA82C'],
    ['#E5DD45', '#E8B11C'],
    ['#E8821C', '#E55445'],
    ['#5052EE', '#AB6EE5'],
    ['#23E5E5', '#2E72BF']
  ]
  //根据 currentIndex 决定展示的数据
  const start = currentIndex * 5
  const end = (currentIndex + 1) * 5
  // 先显示前5条数据
  const showData = allData.value.slice(start, end)
  const seriesArr = showData.map((item, index) => {
    return {
      type: 'pie',
      center: centerPointers[index],
      // radius: [110, 100],
      //鼠标移入动画的移除
      // hoverAnimation: false, //已经弃用,用下面的方法代替
      emphasis: {
        scale: true
      },
      labelLine: {
        show: true // 隐藏指示线
      },
      label: {
        //设置文字颜色
        // show: true,
        position: 'center',
        color: colorArrs[index][0]
      },
      data: [
        {
          //设置只是的名字名字
          name: item.name + '\n\n' + item.sales,
          value: item.sales,
          //设置库存颜色
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: colorArrs[index][0]
              },
              {
                offset: 1,
                color: colorArrs[index][1]
              }
            ])
          }
        },
        {
          value: item.stock,
          itemStyle: {
            color: '#333843'
          }
        }
      ]
    }
  })
  const dataOption = {
    series: seriesArr
  }
  chartInstance.value.setOption(dataOption)
}

// 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
const screenAdapter = () => {
  titleFontSize.value = (seller_ref.value.offsetWidth / 100) * 3.6
  const innerRadius = titleFontSize.value * 2
  const outterRadius = innerRadius * 1.3
  //分辨率大小相关的配置项
  const adapterOption = {
    title: {
      textStyle: {
        fontSize: titleFontSize.value
      }
    },
    series: [
      {
        type: 'pie',

        radius: [outterRadius, innerRadius],
        label: {
          fontSize: titleFontSize.value / 2
        }
      },
      {
        type: 'pie',

        radius: [outterRadius, innerRadius],
        label: {
          fontSize: titleFontSize.value / 2
        }
      },
      {
        type: 'pie',

        radius: [outterRadius, innerRadius],
        label: {
          fontSize: titleFontSize.value / 2
        }
      },
      {
        type: 'pie',

        radius: [outterRadius, innerRadius],
        label: {
          fontSize: titleFontSize.value / 2
        }
      },
      {
        type: 'pie',

        radius: [outterRadius, innerRadius],
        label: {
          fontSize: titleFontSize.value / 2
        }
      }
    ]
  }
  chartInstance.value.setOption(adapterOption)
  chartInstance.value.resize()
}

//定时器开启动画
const startInterval = () => {
  if (timerId) {
    clearInterval(timerId)
  }
  timerId = setInterval(() => {
    currentIndex++
    if (currentIndex > 1) {
      currentIndex = 0
    }
    updateChart()
  }, 3000)
}
onMounted(() => {
  //初始化配置
  initChart()
  //初始化数配置
  getData()
  window.onresize = screenAdapter
  //   初始化分辨率配置
  screenAdapter()
})
onBeforeUnmount(() => {
  window.onresize = null
  clearInterval(timerId)
})
defineExpose({
  screenAdapter
})
watch(
  () => store.state.visual.theme,
  () => {
    chartInstance.value.dispose()
    initChart() // 重新以最新的主题名称初始化图表对象
    screenAdapter() // 完成屏幕的适配
    updateChart() // 更新图表的展示
  }
)
</script>

<style lang="scss" scoped></style>
